<!--
*- coding = utf-8 -*-
#@Time : 2023/2/25 9:31
#@Author : CSDN 沉默小管
#@File : table.vue
#@web  : golangblog.blog.csdn.net
#@Software: WebStorm
-->
<template>
  <div>
    <div :class="props.tableClass" :style="props.tableStyle">
      <el-table
          :row-key="props.tableConfig.keyId"
          :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
          ref="tableRef"
          :setScrollTop="100"
          :style="props.tableConfig.tableStyle"
          :height="props.tableConfig.tableHeight"
          :data="props.tableConfig.tableData"
          :size="props.tableConfig.tableSize"
          :cell-style="props.tableConfig.tableCellStyle"
          v-bind="attrs"
      >
        <el-table-column v-if="props.tableConfig.showSelectColumn" type="selection" align="center" width="40" />
        <!--    具名插槽-->
        <slot name="tableColumn" />
        <el-table-column
            v-if="props.tableConfig.isExpand?true:false"
            type="expand"
        >
          <el-table-column  type="expand">
            <template #default="props">
              <slot name="expandSlot" :props="props" ></slot>
            </template>
          </el-table-column>
        </el-table-column>

        <template v-for="(item,index) in props.tableConfig.tableCol">
          <el-table-column
              v-if="item.showType == 'col' && item.isShow==true"
              :key="item.index"
              :prop="item.prop"
              :label="item.label"
              :width="item.width"
              :fixed="item.fixed"
              :resizable="item.resizable"
              :sortable="item.sortable"
              :show-overflow-tooltip="item.showOverflowTooltip"
          >
            <template #default="scope">
              <span>{{scope.row[item.prop]}}</span>
            </template>
          </el-table-column>
          <el-table-column
              v-if="item.showType == 'slot' && item.isShow==true"
              :key="item.index"
              :prop="item.prop"
              :label="item.label"
              :width="item.prop=='operation'&& !item.width?'250px':item.width"
              :fixed="item.fixed"
              :resizable="item.resizable"
              :sortable="item.sortable"
              :show-overflow-tooltip="item.showOverflowTooltip"
          >
            <template #default="scope">
              <slot :name="item.prop" :index="index" :row="scope.row"></slot>
            </template>

          </el-table-column>
        </template>
        <!--    匿名插槽-->
        <!--                <slot name="table-column"/>-->

      </el-table>
    </div>

    <div v-if="props.pageConfig.isPageShow" :class="props.pageClass" :style="props.pageStyle">
      <el-pagination
          :currentPage="props.pageConfig.currentPage"
          :page-size="props.pageConfig.pageSize"
          :page-sizes="[10,20, 50, 100, 200]"
          :small="props.pageConfig.small"
          :disabled="props.pageConfig.disabled"
          :background="props.pageConfig.background"
          layout="total, sizes, prev, pager, next, jumper"
          :total="props.pageConfig.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import {tableInterface,pageInterface} from "@/components/tableList/types/index";
import {ElTable} from "element-plus";
import {useFunc} from "@/components/tableList/src/hooks/useFunc";
import {onMounted, ref, useAttrs} from "vue";

const attrs = useAttrs();
interface propsInterface{
  tableConfig?:tableInterface
  pageConfig?:pageInterface
  tableStyle?:string
  tableClass?:string
  pageStyle?:string
  pageClass?:string              //page页class类
  topHeight?:number              //向上的距离
}
let props = withDefaults(defineProps<propsInterface>(),{
  //默认值为引用类型的，需要包装一个函数 return 出去
  tableConfig:()=>{
    return {
      tableData: [],
      tableCol: [],
      tableSize: "small",
      keyId:"id",
      showSelectColumn:false,
      tableCellStyle: ()=>"textAlign: 'center';fontWeight: '600';color: 'black'",
    }
  },
  pageConfig:()=>{
    return {
      currentPage: 1,
      pageSize: 10,
      small: true,
      disabled: false,
      background: false,
      total: 0,
      isPageShow: false,
    }
  },
  tableStyle:"",
  tableClass:"",
  pageStyle:"margin:20px 10px",
  pageClass:"",
  topHeight:78,
})
let tableRef = ref<InstanceType<typeof ElTable>>()
interface EmitType {
  (e: "handleSizeChange", params: number): void,
  (e: "handleCurrentChange", params: number): void,
}
const emit = defineEmits<EmitType>();

onMounted(()=>{
  //没有给高度才自动获取table高度
  if(!props.tableConfig.tableHeight){
    handleGetHeight()
  }
})

const {handleSetScrollTop,handleClearSelection,handleSizeChange,handleCurrentChange,toggleRowSelection,handleGetHeight} = useFunc(tableRef,emit,props)

interface exposeInterface{
  handleSetScrollTop:(num:number)=>void
  toggleRowSelection:(row:any)=>void,
  handleClearSelection:()=>void,
}
defineExpose<exposeInterface>({
  handleSetScrollTop,
  toggleRowSelection,
  handleClearSelection,
})

// await new Promise(resolve => {
//
//     setTimeout(() => {
//         resolve()
//     }, 1000)
// })
</script>

<style scoped lang="less">

</style>
